<template>
  <!-- 卡片详情页面 -->
  <div>
    <!-- 布局容器 -->
    <el-container>
      <!-- 表头 -->
      <el-header class="header">
        <div>
          <!-- 用户头像 -->
          <el-avatar :size="45" :src="headImage"></el-avatar>
          <!-- 动态用户名 -->
          <span>用户名</span>
        </div>
        <el-button type="info" @click="logout">退出</el-button>
      </el-header>

      <!-- 主体 -->
      <el-main>
        <el-row :gutter="20">
          <el-col :span="16" :offset="3">
            <div class="grid-content bg-purple">
              <!-- 卡片列表 -->
              <el-card class="box-card">
                <el-container>
                  <!-- 侧边栏 -->
                  <el-aside width="200px">
                    <!-- logo :src="newCardObj.cardPicture"-->
                    <el-avatar
                      :size="160"
                      :src="newCardObj.cardPicture"
                    ></el-avatar>
                  </el-aside>

                  <el-container>
                    <!-- 介绍栏 -->
                    <el-main>
                      <!-- 会员卡名字 -->
                      <h1 style="text-align: center">
                        {{ newCardObj.cardName }}
                      </h1>
                      <!-- 简介 -->
                      <div>简介 : {{ newCardObj.cardComment}}</div>
                      <br /><br />
                      <!-- 公司名称 -->
                      <div style="text-align: right">
                        {{ newCardObj.cardName }}
                      </div>
                    </el-main>
                    <!-- 水平线 -->
                    <el-divider content-position="center">我的功能</el-divider>

                    <!-- 功能列表 -->
                    <el-footer>
                      <!-- 折叠框 -->
                      <el-row type="flex" class="row-bg" justify="space-around">
                        <el-divider direction="vertical"></el-divider>
                        <el-col :span="6">
                          <div class="grid-content">
                            <div class="div-small">订单</div>
                            <!-- 查看 -->
                            <el-popover
                              placement="bottom"
                              width="800"
                              trigger="click"
                            >
                              <!-- 查看按钮 -->
                              <el-button type="text" slot="reference">
                                ￥{{ cardInfo.cardBalance }}
                              </el-button>
                              <!-- 消费账单 -->
                              <el-table :data="orderInfo" style="width: 100%">
                                <el-table-column type="expand">
                                  <template slot-scope="props">
                                    <el-form
                                      label-position="bottom"
                                      inline
                                      class="demo-table-expand"
                                    >
                                      <el-form-item label="订单编号:"><span>{{ props.row.orderId }}</span> </el-form-item>
                                      <el-form-item label="订单名称:"><span>{{ props.row.orderName }}</span> </el-form-item>
                                      <el-form-item label="创建时间:"><span>{{ props.row.orderTime }}</span> </el-form-item>
                                      <el-form-item label="卡包编号:"><span>{{ props.row.cardPackId }}</span> </el-form-item>
                                      <el-form-item label="商品详情:"><span>{{ props.row.orderComment }}</span> </el-form-item>
                                    </el-form>
                                  </template>
                                </el-table-column>
                                <el-table-column  prop="orderName">
                                </el-table-column>
                                <el-table-column prop="orderTime">
                                </el-table-column>
                                <el-table-column prop="totalPrice">
                                </el-table-column>
                              </el-table>
                            </el-popover>
                          </div>
                        </el-col>

                        <!-- 积分 -->
                        <el-divider direction="vertical"></el-divider>
                        <el-col :span="6">
                          <div class="grid-content">
                            <div class="div-small">积分</div>
                            <div class="div-light">
                              {{ this.newCardObj.scoreNumber }}
                            </div>
                          </div>
                        </el-col>

                        <!-- 优惠券 -->
                        <el-divider direction="vertical"></el-divider>
                        <el-col :span="6">
                          <div class="grid-content">
                            <div class="div-small">优惠券</div>
                            <!-- 查看 -->
                            <el-popover
                              placement="bottom"
                              width="900"
                              trigger="click"
                            >
                              <el-table :data="cardInfo.discountCouponList">
                                <!-- 表头 -->
                                <el-table-column
                                  width="150"
                                  property="couponEndTime"
                                  label="到期时间"
                                ></el-table-column>
                                <el-table-column
                                  width="130"
                                  property="couponName"
                                  label="优惠券名"
                                ></el-table-column>
                                <el-table-column
                                  width="400"
                                  property="couponComment"
                                  label="优惠简介"
                                ></el-table-column>
                                <el-table-column
                                  width="150"
                                  label="查看详情"
                                ></el-table-column>
                              </el-table>
                              <!-- 查看按钮 -->
                              <el-button type="text" slot="reference"
                                >查看</el-button
                              >
                            </el-popover>
                          </div>
                        </el-col>
                      </el-row>
                    </el-footer>
                  </el-container>
                </el-container>
              </el-card>
            </div>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  created() {
    //拿到sessionStorage里的数据
    this.orderInfo=JSON.parse(sessionStorage.getItem("orderInfo"))
  },
  data() {
    return {
      // 得到路由的传参
      newCardObj : {},
      // 头像路径
      headImage: require("../../../../assets/img/parker.jpg"),
      // 会员卡信息
      cardInfo: {
        // 会员卡id
        cardId: "111",
        // 会员卡名
        cardName: "肯德基",
        // 积分
        scoreNumber: 23,
        // 余额
        cardBalance: 1758.0,
        // 图片
        cardPicture: '',
        // 会员卡简介
        cardComment: `
        肯德基是一个好东西！！！肯德基是一个好东西！！！
        肯德基是一个好东西！！！肯德基是一个好东西！！！
        肯德基是一个好东西！！！肯德基是一个好东西！！！
        肯德基是一个好东西！！！肯德基是一个好东西！！！`,
        // 公司名称
        companyName: "肯德基有限公司",
        // 优惠券信息
        discountCouponList: [
          {
            couponId: 101,
            couponEndTime: "2021-05-02",
            couponName: "好又多优惠券",
            couponComment:
              "每周对美食的渴望，都留到了肯德基疯狂星期四，春日美味四重奏本周上演，层层撩翻味蕾！",
          },
          {
            couponId: 102,
            couponEndTime: "2021-05-04",
            couponName: "早餐优惠券",
            couponComment:
              "每周对美食的渴望，都留到了肯德基疯狂星期四，春日美味四重奏本周上演，层层撩翻味蕾！",
          },
          {
            couponId: 103,
            couponEndTime: "2021-05-11",
            couponName: "半桶优惠券",
            couponComment:
              "每周对美食的渴望，都留到了肯德基疯狂星期四，春日美味四重奏本周上演，层层撩翻味蕾！",
          },
          {
            couponId: 104,
            couponEndTime: "2021-05-09",
            couponName: "每天打折优惠券",
            couponComment:
              "每周对美食的渴望，都留到了肯德基疯狂星期四，春日美味四重奏本周上演，层层撩翻味蕾！",
          },
        ],

        orderDetailsList: [
          {
            orderId: 101,
            orderDescription: "手机充值",
            orderTime: "2020-10-21",
            orderMoney: 27.56,
          },
          {
            orderId: 101,
            orderDescription: "手机充值",
            orderTime: "2020-10-21",
            orderMoney: 27.56,
          },
          {
            orderId: 101,
            orderDescription: "手机充值",
            orderTime: "2020-10-21",
            orderMoney: 27.56,
          },
          {
            orderId: 101,
            orderDescription: "手机充值",
            orderTime: "2020-10-21",
            orderMoney: 27.56,
          },
          {
            orderId: 101,
            orderDescription: "手机充值",
            orderTime: "2020-10-21",
            orderMoney: 27.56,
          },
          {
            orderId: 101,
            orderDescription: "手机充值",
            orderTime: "2020-10-21",
            orderMoney: 27.56,
          },
        ],
      },

      // 订单详情
      orderInfo:[],
    };
  },
  methods: {
    logout() {
      // window.sessionStorage.clear();
      this.$message.success("您退出了");
      this.$router.push("/loginjudge");
    },
  },
  // 挂载的时候
  mounted() {
    let info = decodeURIComponent(this.$route.query.cardObj);
    this.newCardObj = JSON.parse(info);
    // console.log(this.newCardObj.cardPicture);
    
    // console.log(this.newCardObj);
  },
};
</script>

<style scoped lang="less">
.header {
  background-color: #373d41;
  display: flex;
  justify-content: space-between;
  padding-left: 0;
  align-items: center;
  color: #fff;
  font-size: 20px;
  > div {
    display: flex;
    align-items: center;
    margin-left: 15px;
  }
}

.el-aside {
  background-color: #c0c4cc;
  text-align: center;
  padding-top: 5%;
  padding-bottom: 5%;
}

.el-main {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  padding-left: 15%;
  padding-right: 15%;
  h1 {
    color: #303133;
  }
  div {
    color: #606266;
    line-height: 1.7;
  }
}

.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}

.el-footer {
  .el-row {
    .grid-content {
      text-align: center;

      .div-light {
        color: #409eff;
      }

      .div-small {
        font-size: 13px;
      }
    }
  }
}
</style>